<script setup>
import { onMounted, ref } from 'vue';
import { Operation } from '@element-plus/icons-vue';
import { loading, MPromise } from '@/utilities/loading';
import {
  getRoleListService,
  getRoleUserListService
} from '@/apis/system-manage';
import { CommonElePlusTableEventHandler as TableEventHandler } from '@/utilities/tableeventhandle';

import PermissionEdit from './components/PermissionEdit.vue';

const params = ref({
  roleId: '',
  pageIndex: 1,
  pageSize: 10,
  sortField: '',
  isAsc: false
});

const rolesData = ref([]);
const userList = ref([]);
const total = ref(0);
const getUserList = async () => {
  let res = await getRoleUserListService(params.value);
  userList.value = res.data;
  total.value = res.total;
};

onMounted(() => {
  loading.value = true;
  MPromise.all([getRoleListService({}), getUserList()]).then((resArr) => {
    let roleRes = resArr[0];
    rolesData.value = roleRes.data;
  });
});

const tableEventHanler = new TableEventHandler(params, getUserList);

const onSortChange = tableEventHanler.onSortChange;
const onSizeChange = tableEventHanler.onSizeChange;
const onCurrentChange = tableEventHanler.onCurrentChange;
const onSearch = tableEventHanler.onSearch;
const onReset = tableEventHanler.onResetFunc(() => {
  params.value.roleId = '';
});

let permissionEditRef = ref();
const onPermissionEdit = (id) => {
  permissionEditRef.value.open(id);
};
</script>

<template>
  <page-container title="权限管理">
    <template #extra></template>

    <!--表单区域-->
    <el-form inline>
      <el-form-item label="角色">
        <el-select v-model="params.roleId" placeholder="请选择角色">
          <el-option
            v-for="(item, index) in rolesData"
            :key="index"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="userList" @sort-change="onSortChange" v-loading="loading">
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="realName" label="真实姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="电子邮件"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            circle
            plain
            :icon="Operation"
            @click="onPermissionEdit(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      v-model:current-page="params.pageIndex"
      v-model:page-size="params.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      :background="true"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
  </page-container>

  <permission-edit ref="permissionEditRef"></permission-edit>
</template>

<style scoped>
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
